$(function () {
echarts_1();
echarts_2();
echarts_3();
echarts_4();
echarts_5();
    function echarts_1(){
        var chart1 = echarts.init(document.getElementById('e1'));
        option1 = {
            tooltip: {
                trigger: 'item',
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                textStyle: {
                    color: 'white',
                    fontSize: 10
                },
            },
            series: [
                {
                    name: '平均消费',
                    type: 'pie',
                    radius: ['20%', '80%'],
                    // center: ['25%', '50%'],
                    left: '35%',
                    roseType: 'radius',
                    itemStyle: {
                        borderRadius: 5
                    },
                    label: {
                        show: false
                    },
                    // emphasis: {
                    //     label: {
                    //         show: true
                    //     }
                    // },
                    data: []
                }
            ]
        };
        fetch("/getAddrCost").then(response => response.json()).then(res => {
            res.forEach(item => {
                option1.series[0].data.push({name: item.foodAddr, value: item.avgCost});
            })
            chart1.setOption(option1);
            window.onresize = chart1.resize;
        });
    }
    function echarts_2() {
        echarts.registerMap('shanghai', shanghaiJson);
        var myChart = echarts.init(document.getElementById('e2'));
        var option = {
            // visualMap: { // 视觉映射组件
            //     color: ['#040756', '#040756', '#040756', '#040756', '#040756'] //自定义范围的颜色
            // },
            // layoutSize:500,
            tooltip: { // 悬浮框
                trigger: 'item', // 触发条件
                // backgroundColor: 'rgba(255, 170, 255, 0.8)',
                formatter: '{b}<br/>服务评分：{c}', // 自定义显示数据
                textStyle: {
                    fontsize: 102,
                    color: 'black'
                }
            },
            series: [
                {
                    type: 'map',
                    map: 'shanghai',
                    zoom: 1.2,
                    itemStyle: {
                        normal: {
                            borderWidth: 0.2,/* //区域边框宽度 */
                            borderColor: '#009fe8',/* //区域边框颜色 */
                            areaColor:"#ffefd5"
                        },
                        emphasis: {
                            areaColor: '#FFFFFF',
                        }
                    },
                    showLegendSymbol:true,
                    data:[],
                }
            ],
        }
        fetch("/getAddrService").then(response => response.json()).then(res => {
            res.forEach(item => {
                option.series[0].data.push({name: item.foodAddr, value: item.avgService});
            })
            myChart.setOption(option);
            window.onresize = myChart.resize;
        });

    }
    function echarts_3() {
        var myChart = echarts.init(document.getElementById('e3'));
        var wordCloud_option = {
            tooltip: {},
            series: [{
                type: 'wordCloud',
                gridSize: 2,
                sizeRange: [15, 70],
                rotationRange: [-90, 90],
                shape: 'pentagon',
                width: 500,
                height: 300,
                drawOutOfBound: true,
                textStyle: {
                    color: function () {
                        return 'rgb(' + [
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160)
                        ].join(',') + ')';
                    }
                },
                emphasis: {
                    textStyle: {
                        shadowBlur: 10,
                        shadowColor: '#333'
                    }
                },
                data: []
            }]
        };
        fetch("/getTypeComment").then(response => response.json()).then(res => {
            res.forEach(item => {
                wordCloud_option.series[0].data.push({name: item.foodType, value: item.avgComment});
            })
            myChart.setOption(wordCloud_option);
            window.onresize = myChart.resize;
        });
    }
    function echarts_4() {
        var chart4 = echarts.init(document.getElementById('e4'));
        var xdata = [];
        var ydata1 = [];
        var ydata2 = [];
        var ydata3 = [];

        fetch("/getCostTop10").then(response => response.json()).then(res => {
            res.forEach(item => {
                xdata.push(item.foodType);
                ydata1.push(item.avgEnvironment);
                ydata2.push(item.avgTaste);
                ydata3.push(item.avgService);
            })
            option4 = {
                //  backgroundColor: '#00265f',
                //展示右上角的标签显示，series中的name需与这边一致，否则不进行展示
                legend: {
                    data: xdata,
                    type: "plain",
                    right: '2%',  //展示位置，具体可查看api
                    textStyle: {
                        color: 'rgba(255,255,255,.5)',  //文字颜色
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {type: 'shadow'}
                },
                grid: {
                    left: '0%',
                    top: '10px',
                    right: '0%',
                    bottom: '4%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    // data: data.titleList,
                    data: xdata,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(255,255,255,.1)",
                            width: 1,
                            type: "solid"
                        },
                    },

                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        interval: 0,
                        // rotate:50,
                        show: true,
                        splitNumber: 15,
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: '12',
                        },
                    },
                }],
                yAxis: [{
                    type: 'value',
                    axisLabel: {
                        //formatter: '{value} %'
                        show: true,
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: '12',
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(255,255,255,.1	)",
                            width: 1,
                            type: "solid"
                        },
                    },
                    splitLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)",
                        }
                    }
                }],
                series: [
                    {

                        type: 'bar',
                        name: "环境评分",
                        // data: data.oneList,
                        data: ydata1,
                        barWidth: '10%', //柱子宽度
                        // barGap: 1, //柱子之间间距
                        itemStyle: {
                            normal: {
                                color: '#2f89cf', //柱子颜色
                                opacity: 1,
                                barBorderRadius: 5,
                            }
                        }
                    },
                    {

                        type: 'bar',
                        name: "口味评分",
                        // data: data.twoList,
                        data: ydata2,
                        barWidth: '10%', //柱子宽度
                        // barGap: 1, //柱子之间间距
                        itemStyle: {
                            normal: {
                                color: '#27d08a', //柱子颜色
                                opacity: 1,
                                barBorderRadius: 5,  //柱子菱角
                            }
                        }
                    },
                    {

                        type: 'bar',
                        name: "服务评分",
                        // data: data.twoList,
                        data: ydata3,
                        barWidth: '10%', //柱子宽度
                        // barGap: 1, //柱子之间间距
                        itemStyle: {
                            normal: {
                                color: '#FF33CC', //柱子颜色
                                opacity: 1,
                                barBorderRadius: 5,  //柱子菱角
                            }
                        }
                    },
                ]
            };
            chart4.setOption(option4);
            window.onresize = chart4.resize;
        });
    }
    function echarts_5() {
        var myChart = echarts.init(document.getElementById('e5'));
        option5 = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                textStyle: {
                    color: 'white',
                    fontSize: 10
                },
            },
            series: [
                {
                    name: '环境评分',
                    type: 'pie',
                    radius: '50%',
                    left: '20%',
                    data: [],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        fetch("/getAddrEnvironment").then(response => response.json()).then(res => {
            res.forEach(item => {
                option5.series[0].data.push({name: item.foodAddr, value: item.avgEnvironment});
            })
            myChart.setOption(option5);
            window.onresize = myChart.resize;
        });
    }
})


















